<script setup>
const props = defineProps({
  routeMap: {
    type: Object,
    default: {}
  }
})

function onALinkClick(val) {
  // router.push(val.path)
  window.open(val, '_blank')
}
</script>

<template>
  <el-menu-item v-if="!props.routeMap.meta.hidden && !props.routeMap.children" :index="props.routeMap.path">
    <template #default v-if="props.routeMap.meta.isLink">
      <a class="is-link" @click.stop="onALinkClick(props.routeMap.meta.url)">
        <el-icon v-if="props.routeMap.meta.icon">
          <component :is="props.routeMap.meta.icon" />
        </el-icon>
        <span>{{ props.routeMap.meta.title }}</span>
      </a>      
    </template>
    <template #default v-else>
      <el-icon v-if="props.routeMap.meta.icon">
        <component :is="props.routeMap.meta.icon" />
      </el-icon>
      <span>{{ props.routeMap.meta.title }}</span>
    </template>
  </el-menu-item>
  <el-sub-menu v-else-if="props.routeMap.children && props.routeMap.children.length > 0" :index="props.routeMap.path">
    <template #title>
      <el-icon v-if="props.routeMap.meta.icon">
        <component :is="props.routeMap.meta.icon" />
      </el-icon>
      <span>{{ props.routeMap.meta.title }}</span>
    </template>
    <route-render v-for="route in props.routeMap.children" :key="route.name" :route-map="route"></route-render>
  </el-sub-menu>
</template>

<style scoped lang="scss">
.is-link {
  width: 200px;
  margin-left: -40px;
  margin-right: -20px;
  padding-left: 40px;
  text-decoration: none;
  outline: none;
  span {
    display: inline-block;
    height: 50px;
    line-height: 50px;
  }
}
</style>